<script setup>
import { useRoute } from 'vue-router'
import { gotoPay } from '@/api/orderAPI.js'
import { onMounted, ref } from 'vue'
import { useTimeCut } from '@/utils/useTimeCut.js'

const myTime = useTimeCut()
const route = useRoute()
const paydata = ref({})
onMounted(async () => {
  const res = await gotoPay(route.params.id)
  paydata.value = res.data.result
  myTime.start(10)
})
//支付带参数跳转
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/pay'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.params.id}&redirect=${redirectUrl}`
</script>
<template>
  <div class="container">
    <div class="time">
      订单提交成功！请尽快完成支付。
      <p>支付时间还剩{{ myTime.formatTime }}，超时后将取消订单。</p>
    </div>
    <div class="body">
      <p>请选择以下支付方式付款</p>
      <div class="paystyle">
        <p>支付平台</p>
        <a href="#" style="margin-right: 10px; color: green; font-weight: bold"
          >微信</a
        >
        <a :href="payUrl" style="color: blue; font-weight: bold">支付宝</a>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.time {
  background-color: white;
  height: 200px;
  padding: 50px;
  margin-top: 20px;
  font-size: 25px;
  line-height: 80px;
  p {
    font-size: 16px;
    color: #666;
    line-height: 0;
  }
}
.body {
  background-color: white;
  height: 500px;
  margin-top: 30px;
  padding: 30px;
  P {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .paystyle {
  }
}
</style>
